/*
 https://blog.csdn.net/qq_35577655/article/details/127169333?ops_request_misc=&request_id=1c6bf5d99d904ec5a38c0b90ead81fb3&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~koosearch~default-1-127169333-null-null.268^v1^control&utm_term=blob&spm=1018.2226.3001.4450

 Blod 二进制大对象,可以存储大量二进制编码格式的数据。

 Blod的构造函数,接受两个参数
   array: Array、ArrayBuffer、Blob、DOMString等对象构成的 Array。

   {options}:
     types: ""(默认) 、 "text/plain" 、 "application/pdf" 、 "image/png" ... (MIME)
     endings: 用于指定包含行结束符\n的字符串如何被写入。
        "native": 代表行结束符会被更改为适合宿主操作系统文件系统的换行符，
        "transparent": 代表会保持 blob 中保存的结束符不变。


 方法: 
 slice/分片   第三个参数可指定MIME类型，不指定则为 "";
 arrayBuffer 返回一个 promise，其会解决为一个包含 Blob 所有内容的二进制格式的 ArrayBuffer。
*/


//实例属性很简单,只有size和type
let blob = new Blob(['HelloWorld'],{type:'text/plain'});
let newblob = blob.slice(0,5,"text/pliain"); 

console.log(newblob)
newblob.arrayBuffer().then((res)=>{
  console.log("\n\nnewblob:",res)
})



/*
 FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，
 使用 File 或 Blob 对象指定要读取的文件或数据
 ⚠️ 这貌似是一个依赖于浏览器的类，在其他环境可能会运行不了

 方法:
 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。
 当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。

 readAsText 可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容 (字符串形式);
 类似的还有readAsDataURL、readAsArrayBuffer、readAsBinaryString

 onload 处理load事件。该事件在读取操作完成时触发。
*/

// let f = new FileReader();
// f.readAsText(newblob); //注意是异步方法,需要监听onload
// f.onload = function(e){
//    console.log(e.target.result);
// }




/**
 * URL.createObjectURL(Blob/File) - 返回指定对象在内存中地址的字符串，这个 URL 的生命周期和创建它的窗口中的 document 绑定。
 * 用法：可以直接创建资源链接,并模拟点击下载
 * 
 * URL.revokeObjectURL(Blob/File) - 可以用来释放内存对已存在对象的引用
 */

// const objectURLS = URL.createObjectURL(newblob); 
// const aTags = document.createElement('a');
// aTags.href = objectURLS;
// aTags.download = `FileName.txt`
// aTags.click()
// URL.revokeObjectURL(objectURLS);




/*
ArrayBuffer(数组缓冲区) 是固定长度的二进制数据缓冲区。简单来说就是可用于在内存中分配特定数量的字节空间。

它是一个字节数组，通常在其他语言中称为“byte array”。不能直接操作 ArrayBuffer 中的内容；
而是要通过类型化数组对象(TypeArray) 或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

前者的数组成员只能存放同一类型数据，后者可以是不同数据类型。

详细: 
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
https://blog.csdn.net/weixin_49012647/article/details/115053741

TypeArray对象: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#syntax
DataView对象:  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DataView


拓展: TypeArray类型有很多,有一定区别，比如能存放的范围不同

 例:
   Int8Array  类型数组表示二进制补码 8 位有符号整数的数组。内容初始化为 0。一旦建立，你可以使用对象的方法引用数组中的元素，或使用标准数组索引语法 ( 即，使用括号注释)。
   Uint8Array 数组类型表示一个 8 位无符号整型数组，创建时内容被初始化为 0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。

   8位二进制所能表示的无符号整数范围为0~255；8位二进制所能表示的带符号整数范围为-127~127。
   (1) 如果符号位为0，那么字节中存储的数值是正数；
   (2) 如果符号位为1，那么字节中存储的数值是负数；
 
   结论:Uint8不能存负数
*/

//创建了一个 3 字节的缓冲区，并使用 Int8Array 视图引用它。
let buffer = new ArrayBuffer(3);
let view = new Int8Array(buffer);
view[0] = 1;
view[1] = 2;
view[2] = 3;
console.log(view)

//其他创建方式
let view1 = Int8Array.from({length:3},(x,k) => k+1); 
let view2 = Int8Array.from([1,2,3], x => x+3 );
let view3 = Int8Array.from('789');
console.log(view1,view2,view3);




/*
  Base64 - 是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。
  atob()、btoa()、canvasDOM.toDataURL()、new FileReader().readAsDataURL(File Object/Bolb Object)
*/








/*
 File 对象是特殊类型的 Blob，所以FileReader, URL.createObjectURL(), createImageBitmap() (en-US), 及 XMLHttpRequest.send() 除了能处理 Blob 也能处理 File。

 通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,
 也可以是来自由拖放操作生成的 DataTransfer 对象,
 或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
 在 Gecko 中，特权代码可以创建代表任何本地文件的 File 对象，而无需用户交互。
 详细信息，请参阅 https://developer.mozilla.org/zh-CN/docs/Web/API/File。

 File继承自Blod,除了type、size以外，还有文件名、修改时间、路径等属性
*/

//File比Bold多了一个必选参数-文件名
//let file = new File(['HelloWorld'],'File.txt',{type:'text/plain'});